<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://www.lovejavascript.com/css/base.css">
<title>listManager:单列表简易渲染</title>
<style>
html, body{
	overflow-x:hidden;
}
h2{
	font-size:22px;
	padding:10px 30px;
	color:#333;
}
p{
	font-size:14px;
	padding:10px 30px;
	color:#333;
	text-indent:2em;
}
hr{    
	margin-top: 18px;
    margin-bottom: 18px;
    border: 0;
    border-top: 1px solid #eee;
}
</style>
</head>

<body>
<h2>listManager:单列表简易渲染</h2>
<p>存在.json文件，谷歌需要放到环境中效果才能展现</p>
<hr/>
<div style="width:95%;margin:0px auto;">
    <table width="100%" cellspacing="1" cellpadding="0" list-manager="demoOne">
        <thead>
            <tr>
                <th th-name="th-one" remind="这里是第一列" sorting="up">第一列我就是第一列，就这么长，任性</th>
                <th th-name="th-two" remind="这里是第二列" sorting="down">第二列</th>
                <th th-name="th-three" remind="这里是第三列" sorting>第三列</th>
                <th th-name="th-four" remind="这里是第四列">第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
            <tr>
              <td>1言毕，眼闭</td>
              <td>遥想星空满目</td>
              <td>日升，起身</td>
              <td>淡看今日如故</td>
            </tr>
            <tr>
              <td>心欲近、心愈远</td>
              <td>近于咫尺犹如远在天边</td>
              <td>心欲静、心愈乱</td>
              <td>静如止水却似心乱如麻</td>
            </tr>
        </tbody>
    </table>
</div>
<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="listManagerConfig.js"></script>
<script type="text/javascript" src="js/listManager.js"></script>
<script type="text/javascript" >
$(function(){
	$('[list-manager]').listManager({		
		isDevelopMode   : true		//是否为开发模式，为true时将打印事件日志
		,basePath		: ''		//当前基本路径[用于加载资源文件]
		,animateTime	:300		//动画效果延时
		,minNum:40					//宽度所允许的最小值
		,supportSorting	: true		//是否支持排序
		,disableCache	: false		//是否禁用本地缓存
		,supportRemind	: true		//是否支持提示信息
		,supportAdjust	: true		//是否支持宽度调整
		,supportDrag	: true 		//是否支持拖拽换位 
		,supportConfig	: true 		//是否支持配置列表功能[操作列是否可见]
		,supportSetTop	: true		//是否支持表头置顶
		,isRealTime		: true		//列表内是否存在实时刷新[平时尽量不要设置为true，以免消耗资源]		
		,isCombSorting	: true		//是否为组合排序[只有在支持排序的情况下生效
		,sortingCallback:function( query ){		
			console.log( query );		
			var _demoOne = $('[list-manager="demoOne"] tbody'),
				_firstChild = _demoOne.find('tr:first-child');
				_demoOne.append(_firstChild);
				_firstChild.fadeIn(500);
			
		}
		,supportAjaxPage: true		//是否支持配置列表ajxa分页[多列表两种状态都有时，统一配置为true,禁用的列表pageJson参数为空即可]
		,sizeData : [10,20,30,40,50,60]	
		,pageData: {				//分页数据
			tPage: 10,				//总页数
			cPage: 3,				//当前页	
			pSize: 10,				//每页显示条数[可用来配置每页显示数]
			tSize: 100				//总条数
		}
		,pageQuery:{
			pageList : [1,2,3,4,5,6]
		}
		,pageCallback:function(query, userQuery){
			//在该callback中 对列表数进行重新请求 并对列表及分页进行数据重填
			
			//1、请求后端数据
			// $.ajax() ....
							
			//2、列表数据重填
			var _demoOne = $('[list-manager="demoOne"] tbody'),
				_firstChild = _demoOne.find('tr:first-child');
				_demoOne.append(_firstChild);
				_firstChild.fadeIn(500);
			
			//3、分页数据重新渲染				
			this.resetPageData(_demoOne, {
				tPage: Math.ceil(100 / query.pSize),				//总页数
				cPage: query.cPage,				//当前页	
				pSize: query.pSize,				//每页显示条数
				tSize: 100				//总条数
			});
			return query;
		}
	},function(query){
		//模拟搜索数据返回操作
		//query ex1: {pSize:20, cPage: ...};  ex2: {demoOne:{pSize:...},demoTwo:{pSize:...}}
		$('[list-manager]').listManager('resetPageData', query);
	});
});
</script>
</body>
</html>
